<template>
  <view
    v-for="(image, imageIndex) in component.imageList"
    :key="imageIndex"
    class="page-image-container"
  >
    <v-image
      :src="image.url"
      width="100vw"
      :lazy-load="false"
      mode="widthFix"
      @click="clickHandle(image)"
    />
    <view v-if="image.title" class="page-image-footer">
      {{ image.title }}
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  component: StorePageImageItem;
}>();

const emits = defineEmits<{
  navigate: [event: string, value: string | undefined];
}>();

const clickHandle = (item: StorePageImageItem['imageList'][number]) => {
  if (item.event === 'page') {
    emits('navigate', item.event, item.page);
  } else if (item.event === 'product') {
    emits('navigate', item.event, item.product);
  }
};
</script>

<style lang="scss" scoped>
.page-image-container {
  position: relative;
  .page-image {
    width: 100%;
    display: block;
  }
  .page-image-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
      360deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 12rpx;
  }
}
</style>
